
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
    <style>
        body {
            background-image: url('images/1.jpg'); /* 使用你选择的背景图片链接 */
            font-family: 'Arial', sans-serif;
            background-color: #f5f7fa;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            color: #333;
        }

        .form-container {
            background-color: white;
            max-width: 500px;
            width: 100%;
            margin: 20px;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        h2 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
            font-size: 24px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }

        input[type="text"],
        input[type="password"],
        input[type="email"] {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            box-sizing: border-box;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        input[type="text"]:focus,
        input[type="password"]:focus,
        input[type="email"]:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }

        input::placeholder {
            color: #95a5a6;
            font-size: 14px;
        }

        .radio-group {
            margin: 15px 0;
        }

        .radio-option {
            display: inline-block;
            margin-right: 25px;
            position: relative;
            padding-left: 25px;
            cursor: pointer;
        }

        .radio-option input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

        .radio-custom {
            position: absolute;
            top: 0;
            left: 0;
            height: 18px;
            width: 18px;
            background-color: #eee;
            border-radius: 50%;
            border: 2px solid #bdc3c7;
            transition: all 0.3s;
        }

        .radio-option:hover .radio-custom {
            border-color: #3498db;
        }

        .radio-option input:checked ~ .radio-custom {
            background-color: #3498db;
            border-color: #3498db;
        }

        .radio-custom:after {
            content: "";
            position: absolute;
            display: none;
            top: 3px;
            left: 3px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: white;
        }

        .radio-option input:checked ~ .radio-custom:after {
            display: block;
        }

        .button-group {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }

        button {
            padding: 12px 25px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s;
            flex: 1;
            margin: 0 5px;
        }

        button[type="submit"] {
            background-color: #2ecc71;
            color: white;
        }

        button[type="submit"]:hover {
            background-color: #27ae60;
        }

        a button {
            background-color: #3498db;
            color: white;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }

        a button:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>
<div class="form-container">
    <h2>用户注册</h2>
    <form action="RegisterServlet" method="post" onsubmit="return validateForm()">
        <!-- 用户名 -->
        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" name="username" id="username" required placeholder="请输入用户名（4-20位）">
        </div>

        <!-- 密码 -->
        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" name="password" id="password" required placeholder="请输入密码（6-20位）">
        </div>

        <!-- 确认密码 -->
        <div class="form-group">
            <label for="confirmPassword">确认密码：</label>
            <input type="password" id="confirmPassword" required placeholder="请再次输入密码">
        </div>

        <!-- 角色选择 -->
        <div class="form-group">
            <label>身份：</label>
            <div class="radio-group">
                <label class="radio-option">
                    <input type="radio" id="teacher" name="occupation" value="教师" required>
                    <span class="radio-custom"></span>
                    <span>教师</span>
                </label>
                <label class="radio-option">
                    <input type="radio" id="student" name="occupation" value="学生" required>
                    <span class="radio-custom"></span>
                    <span>学生</span>
                </label>
            </div>
        </div>

        <!-- 性别选择 -->
        <div class="form-group">
            <label>性别：</label>
            <div class="radio-group">
                <label class="radio-option">
                    <input type="radio" id="male" name="gender" value="男" required>
                    <span class="radio-custom"></span>
                    <span>男</span>
                </label>
                <label class="radio-option">
                    <input type="radio" id="female" name="gender" value="女" required>
                    <span class="radio-custom"></span>
                    <span>女</span>
                </label>
            </div>
        </div>

        <!-- 邮箱 -->
        <div class="form-group">
            <label for="email">邮箱：</label>
            <input type="email" name="email" id="email" required placeholder="请输入有效邮箱">
        </div>

        <div class="button-group">
            <button type="submit">立即注册</button>
            <a href="login.jsp"><button type="button">登录</button></a>
        </div>
    </form>
</div>

<!-- 前端密码一致性校验JS -->
<script>
    function validateForm() {
        var password = document.getElementById("password").value;
        var confirmPassword = document.getElementById("confirmPassword").value;
        if (password !== confirmPassword) {
            alert("密码和确认密码不一致！");
            return false;
        }

        // 可以在这里添加更多验证逻辑
        var username = document.getElementById("username").value;
        if (username.length < 4 || username.length > 20) {
            alert("用户名长度必须在4-20位之间！");
            return false;
        }

        if (password.length < 6 || password.length > 20) {
            alert("密码长度必须在6-20位之间！");
            return false;
        }

        return true;
    }
</script>
</body>
</html>